<template>
  <div>
    <el-pagination
        small
        background
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
    />
  </div>
</template>

<script setup>
import {computed} from "vue";

const UpdatePagination = defineEmits(['update:page', 'update:limit', 'pagination']);

const props = defineProps({
  total: {
    required: true,
    type: Number
  },
  page: {
    type: Number,
    default: 1
  },
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 30, 40];
    }
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  limit: {
    type: Number,
    default: 5
  }
});

let currentPage = computed({
  get: () => props.page,
  set: (val) => UpdatePagination('update:page', val)
})
let pageSize = computed({
  get: () => props.limit,
  set: (val) => UpdatePagination('update:limit', val)
})



function handleSizeChange(size) {

}


function handleCurrentChange(page) {
  UpdatePagination('pagination', {page: page, limit: pageSize})
}
</script>

<style scoped>
/*.pagination-container {*/
/*  background: #fff;*/
/*  padding: 32px 16px;*/
/*}*/
/*.pagination-container.hidden {*/
/*  display: none;*/
/*}*/
</style>
